<template>
	<div class="S_Performance">
		<div class="one_part">
			<!-- <nav-li></nav-li> -->
			<nav>
				<ul class="nav" id="nav">
					<router-link id="weekli" tag="li" :to="{path:'/S_Performance-week',query:{empNo:personalId}}">周</router-link>
					<router-link id="yearli" class="cur" tag="li" :to="{path:'/S_Performance-year',query:{empNo:personalId}}">年</router-link>
					<router-link tag="li" :to="{path:'/S_Performance-team',query:{empNo:personalId}}" id="teamLi">团队</router-link>
				</ul>
			</nav>
			<ul class="ranking">
				<!-- <router-link tag="li" :to="{path:'/getPayDetail',query:{empNo:personalId}}"><i class="ion" :class="statusClass"></i><p>{{yearData.status || '良好'}}</p></router-link> -->
				<li @click="statusTip">
					<i class="ion" :class="statusClass"></i>
					<p>{{yearData.status || '良好'}}</p>
					<span class="status_tip" v-if="isShowStatusTip">
						<b>严重违规：</b>有“严重违规项”<br>
						<b>其他违规：</b>有“较严重违规项”&amp;“一般违规项”等其它违规<br>
						<b>经营良好：</b>没有违规项
					</span>
				</li>
				<li><big>{{yearData.rank || 0}}</big><p>驾驶安全排名</p></li>
				<router-link tag="li" to="/getLevelExplain"><i class="icon_jewel"></i><p>{{yearData.level ||'未知'}}</p></router-link>
			</ul>
			<router-link tag="span" :to="{path:'/getRangkingList',query:{empNo:personalId}}" class="rank_btn">
				<i class="ion ion-arrow-graph-up-right"></i>
				<p>排行榜</p>
			</router-link>
		</div>
		<div class="ranking_info">
			<ul>
				<li><span class="fc_green">{{yearData.safeKMMon || 0}}<i class="ft12">/KM</i></span><p>当月安全里程</p></li>
				<li><span class="fc_orange">{{yearData.safeKMYear || 0}}<i class="ft12">/KM</i></span><p>累计安全里程</p></li>
				<li>
					<span @click="starTip">
						<i class="ion ion-android-star"></i><ins>x{{starNum || 0}}</ins>
						<i class="ion ion-ios-rose"></i><ins v-cloak>x{{flowerNum || 0}}</ins>
					</span>
					<span class="star_tip" v-if="isShowStarTip">周零违规=1花<br/>12花=1星</span>
					<p>累计安全星</p>
				</li>
			</ul>
		</div>
		<ul class="two year_two">
			<li @click="getAccidentByYear">
				<i class="icon_castrol circle car"></i>
				<p>事故{{yearData.accidentTime || 0}}起</p>
			</li>
			<li @click="getIllegalByYear">
				<i class="icon_castrol circle eye"></i>
				<p>违章{{yearData.illTime || 0}}次</p>
			</li>
			<li @click="getDudectPointByYear">
				<i class="icon_castrol circle per_info"></i>
				<p>驾照被扣{{yearData.dedTotal || 0}}分</p>
			</li>
		</ul>
		<ul class="items">
			<router-link :to="{path:'/getEarnsDetail',query:{empNo:personalId}}" tag="li" class="has_right_arrow has_right_attach">
				<i class="icon_castrol earn"></i>
				<span>累计加分</span>
				<span class="attach fc_red ft18">{{yearData.earns || 0}}</span>
			</router-link>
			<router-link :to="{path:'/getPayDetail',query:{empNo:personalId,isPay:'00'}}" tag="li" class="has_right_arrow has_right_attach">
				<i class="icon_castrol pay"></i>
				<span>累计减分</span>
				<span class="attach fc_orange ft18">{{yearData.expense  || 0}}</span>
			</router-link>
			<router-link :to="{path:'/getPayDetail',query:{empNo:personalId,isPay:'01'}}" tag="li" class="has_right_arrow has_right_attach">
				<i class="icon_castrol pay"></i>
				<span>VDR数据</span>
				<span class="attach fc_orange ft18"></span>
			</router-link>	
			<li class="has_right_attach">
				<i class="icon_castrol balance"></i>
				<span>累计盈余</span>
				<span class="attach fc_green ft18">{{yearData.subplus || 0}}</span>
			</li>
		</ul>

	</div>
</template>
<script type="text/javascript">
	// import NavLi from './nav'
	import getInterface from '../../assets/js/insterface'
	import NavLiShow from '../../assets/js/performace/navPermission'
	// import getQuery from '../../assets/js/get_querys'

	export default{
		// mixins:[getQuery],
		mixins:[NavLiShow],
		// components:{NavLi},
		data(){
			return{
				'personalId':'',
				'flowerNum':'',
				'starNum':'',
				'yearData':'',
				'statusClass':'ion-android-happy',
				'isShowStarTip':false,
				'isShowStatusTip':false,
				// 'yearUrl':getInterface.getYearUrl + '/'+ this.$route.query.empNo,
				// 'jurisdictionUrl':getInterface.getJurisdictionUrl + '/' + this.$route.query.empNo
			}
		},
		mounted(){
			document.title="个人绩效";
			this.$el.parentElement.parentNode.style.background = '#fafafa';
			// var query = this.getQuerys();
      		this.personalId = this.$route.query.empNo;
			this.getYearData();
		},
		methods:{
			getYearData(){
				const yearUrl = getInterface.getYearUrl + '/' + this.$route.query.empNo;
				this.$http.get(yearUrl,{emulateJSON: true})
				.then((response) => {
					console.log(response);
					if(response.data != null){
						this.yearData = response.data;
						let star = response.data.safeStar.split('.');
						this.flowerNum = star[1];
						this.starNum = star[0];
						// console.log(this.flowerNum+'------------'+this.starNum)
						// this.yearData.safeStar = parseInt(this.yearData.safeStar);
						// this.yearData.grayStar = 4 - parseInt(this.yearData.safeStar);

						switch(response.data.status){
							case 1:
								this.yearData.status = "经营良好";
								this.statusClass = 'ion-android-happy';
								break;
							case 2:
								this.yearData.status = "其他违规";
								this.statusClass = 'ion-android-sad fc_orange';
								break;
							case 3:
								this.yearData.status = "严重违规"
								this.statusClass = 'ion-android-sad fc_red';
								break;
						}
					}
				})
			},
			//事故
			getAccidentByYear(){
				if(this.yearData.accidentTime>0){
					this.$router.push({path:'/getAccidentByYear',query:{empNo:this.personalId}});
				}
			},
			//违章
			getIllegalByYear(){
				if(this.yearData.illTime>0){
					this.$router.push({path:'/getIllegalByYear',query:{empNo:this.personalId}});
				}

			},
			//扣分
			getDudectPointByYear(){
				if(this.yearData.dedTotal>0){
					this.$router.push({path:'/getDudectPointByYear',query:{empNo:this.personalId}});
				}

			},
			starTip(){
				this.isShowStarTip = true;
				let vue = this;
				setTimeout(function(){
					vue.isShowStarTip = false;
				},5000);
			},
			statusTip(){
				this.isShowStatusTip = true;
				let vue = this;
				setTimeout(function(){
					vue.isShowStatusTip = false;
				},5000)
			}
		}
	}
</script>
